<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"></meta>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" href="http://1.xinli2017.applinzi.com/login/css/mui.min.css"/>
    <script src="http://1.xinli2017.applinzi.com/weixin/js/jquery.min.js"></script>
    <script src="http://1.xinli2017.applinzi.com/weixin/js/mui.min.js"></script>
    <script type="text/javascript">
        document.addEventListener('plusready', function () {
            //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
        });
    </script>
    <style>
        body {
            font-size: 16px;
        }

        label {
            width: 10%;
        !important
        }

        input {
            height: 35px;
        }

        input[type=text] {
            border: 0;

        }

        input[placeholder] {
            font-size: 14px;
        }

        input[type=password] {
            border: 0;
        }

        input[type=button] {
            border: 0;
        }

        #mis h3 {
            text-align: center;
            padding: 10px 5px;
            font-size: 20px;
        }

        .city {
            height: auto;
            margin-bottom: 10px;
            background: #fff;
        }

        .city input[type=text] {
            margin: 0;

        }

        .city input:nth-child(2) {
            border-bottom: 1px solid #ebebeb;

        }

        .text {
            width: 100%;
            color: #FF9A4A;
            font-size: 14px;
            margin-top: 15px;
        }

        .dingdan {
            text-align: center;
            height: 50px;
            line-height: 50px;
        }

        .dingdan span {
            font-size: 14px;
        }

        .dingdan span > span {
            font-size: 18px;
            color: #FF9A4A;
            font-weight: bold;
        }

        .select {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }

        .select select {
            width: 49%;
            color: #333;
            font-size: 14px;
        }

        .mui-table-view:after {
            background-color: #fff;
        }

        .mui-table-view:before {
            background-color: #fff;
        }
      
          .showCard {
            width: 100%;
                background: url("http://1.xinli2017.applinzi.com/img/bankcard_red.png") center no-repeat;
            background-size: 100% 100%;
        }

        .cardStyle {
            padding: 10px 15px;
            border-radius: 8px;
            position: relative;
            padding-left: 65px;
            padding-bottom: 60px;
            background-size: 100% 100%;
        }
        .bankLogo {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #DAE3EC;
            padding: 5px;
            position: absolute;
            left: 15px;
            top: 22px;
        }

        .bankLogo img {
            width: 100%;
            border-radius: 50%;
        }

        .cardStyle .cardNum {
            display: flex;
            justify-content: space-between;
        }

        .cardStyle > div:last-child {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            padding: 0 40px;
            height: 41px;
            line-height: 41px;
        }
          .bankText h4 {
            color: #fff;
            margin-top: 10px;
        }

        .bankText > p {
            color: rgba(255, 255, 255, 0.5);
            font-size: 12px;
        }
        .cardStyle .cardNum > div:nth-child(1){
            color: #fff;
            font-weight: 600;
            font-size: 20px;
        }
        #carno2{
             color: #fff;
            font-weight: 600;
            font-size: 20px;
        }

        .cardStyle .cardNum > div:last-child {
            color: #fff;
            font-weight: 600;
            font-size: 20px;
        }

        .cardStyle .cardNum > div {
            color: rgba(255, 255, 255, 0.5);
        }

        .cardStyle > div:last-child > div {
            width: 100%;
            height: 100%;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .newTask {
            position: fixed;
            bottom: 0;
            z-index: 9;
            height: 40px;
            line-height: 40px;
            background-color: #eee;
            width: 100%;
            text-align: center;
            font-size: 16px;
            color: #00aaee;
        }

    </style>
</head>
<body style="padding: 0 15px">
<script>
		try{
			window.android.invokeMethod(0,["确认购买信息","true"])
				}catch(e){
			console.log(e)
            
		}
	</script>
<!-- <header class="mui-bar mui-bar-nav" style="background:#00aaee">
    <h1 class="mui-title" style="color:#fff;">确认购买信息</h1>
</header> -->
<div style="border-radius:5px;background: none;">
    <div class="dingdan">
        <span>订单金额：<span id="amount" th:text="${amount}"></span>元</span>
        <span style="display:none" id="brandId" th:text="${brandId}"></span>
        <span style="display:none" id="phone" th:text="${phone}"></span>
        <span style="display:none" id="channe_tag" th:text="${channe_tag}"></span>
        <span style="display:none" id="order_desc" th:text="${order_desc}"></span>
        <span style="display:none" id="purcase_type" th:text="${purcase_type}"></span>
        <span style="display:none" id="bank_card" th:text="${bank_card}"></span>
        <span style="display:none" id="product_id" th:text="${product_id}"></span>
        <span style="display:none" id="post_url" th:text="${post_url}"></span>
    </div>
</div>
<div>
    <div class="showCard">
        <div class="cardStyle">
            <div class="bankLogo">
                <img  src="http://1.xinli2017.applinzi.com/weixin/images/src_assets_mangopay_cashier_method_unionpay.png"/>
            </div>
            <div class="bankText">
                <h4 id="bankName"  >出款卡银行卡</h4>
            </div>
            <div>
                <div>
                     <div class="cardNum">
                        <div th:text="${bank_card}" id="carno1" ></div>
                        <div>* * * *</div>
                        <div>* * * *</div>
                        <div th:text="${bank_card}" id="carno2" ></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="mui-input-row" style="width:100%;margin:15px auto;">
    <button id="btn" class="mui-btn"
            style="width:100%;height:40px;background:#0a80ff;border:0; color: #fff;">确定并购买
    </button>
</div>
<p class="text">提醒：您正在进行一笔消费交易，请认真核实并确保银行卡信息不能透露给别人！</p>
 <input style="display:none" type="text" th:value="${cardtype}" id="cardtype"/>
<script  type="text/javascript">
    $(function () {
	    // 银行卡加密显示
        var str = $('#carno1').text()
        var str2 = $('#carno2').text()
        function fun(str,str2) {
            console.log(str)
            console.log(str2)
           var str=str.substring(0,4)
           var str2=str2.substring(str2.length - 4, str2.length)
            $('#carno1').text(str)
            $('#carno2').text(str2)
        }
        fun(str,str2);
        $("#btn").click(
        	function () {
        	$("#btn").attr({"disabled":"disabled"});
           		// 这是获取所传val的写法
           		var brandId = $("#brandId").text();
            	var phone = $("#phone").text();
            	var amount = $("#amount").text();
            	var channe_tag = $("#channe_tag").text();
            	var order_desc = $("#order_desc").text();
            	var purcase_type = $("#purcase_type").text();
            	var bank_card = $("#bank_card").text();
            	var product_id= $("#product_id").text();
            	var post_url = $("#post_url").text();
	 			var type="POST";
	 			$.ajax({
	 	             url: post_url,
	 	             type: type,
	 	             dataType: 'JSON', 
	 	             data: {
	 	               		brandId: brandId,
	 	               		phone: phone,
	 	                	amount: amount,
			                channe_tag: channe_tag,
			                order_desc: order_desc,
			                purcase_type: purcase_type,
			                bank_card: bank_card,
			                product_id: product_id,
	 	             },
	 	             success: function (data) {
	 	                	console.log(data)
	 	                	if(data.resp_code=="000000"){
                                 mui.alert(data.resp_message, '提示信息', function() {});
	 	                		turntopage('http://1.xinli2017.applinzi.com/login/zhufucg.html')
	 	                	}else if(data.resp_code=="999990"){
	 	                		 mui.alert(data.resp_message, '提示信息', function() {});
	 	                		   turntopage(data.result)
	 	                	}else{
	 	                		 mui.alert(data.resp_message, '提示信息', function() {});
	 	                		turntopage('http://1.xinli2017.applinzi.com/login/zhufusb.html')
	 	                	}
	 	             },
	 			})
	  
	        
        });
    //跳转页面专用
        function turntopage(url){
			mui.openWindow({
			url:url,
			});
		}
           //跳转页面专用
    });
</script>
</body>
</html>